import React, { Component } from 'react';
import styled from 'styled-components/native';

import { colors } from '../../utils/constants';

const Theme = {
  borderColor: colors.HR,
  selectionColor: colors.TEXT_SELECTION,
  error: {
    borderColor: colors.ERROR_RED,
    selectionColor: colors.ERROR_RED,
  }
};

const Root = styled.View`
  minHeight: 50;
  backgroundColor: ${ props => props.bgColor ? props.bgColor : colors.WHITE };
`;

const TextInputPart = styled.TextInput.attrs({
  placeholderTextColor: colors.INPUT_PREHOLDER,
  selectionColor: props => props.error ? Theme.error.selectionColor : Theme.selectionColor,
  underlineColorAndroid: 'transparent'
})`
  fontSize: ${ props => props.fontSize ? props.fontSize : 18 };
  borderColor: ${ props => props.error ? Theme.error.borderColor : Theme.borderColor };
  borderBottomWidth: 1;
  paddingTop: 10;
  paddingBottom: 10;
  paddingLeft: 5;
  paddingRight: 5;
`;

const ErrorText = styled.Text`
  color: ${ colors.ERROR_RED };
  fontSize: 14;
  paddingTop: 5;
  paddingBottom: 5;
  paddingLeft: 10;
  paddingRight: 10;
`;

class TextInputCom extends Component {
  render() {
    return (
      <Root bgColor={this.props.bgColor}>
        <TextInputPart innerRef={r => { this.TextInput = r }} {...this.props} />
        {this.props.error && <ErrorText>{this.props.errorMsg ? this.props.errorMsg : "有错误"}</ErrorText>}
      </Root>
    );
  }
}

export default TextInputCom;
